<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.fade.js"></script>
    <style>body {margin: 0;}</style>
</head>

<body>
    <canvas id="app"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            fullScreen: true
        });
        $app.start();

        var $below = Easycanvas.Sprite({
            name: 'bgbelow',
            content: {
                img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            },
            style: {
                locate: 'lt',
                zIndex: 1,
                width: document.body.clientWidth,
                height: document.body.clientHeight
            },
        });

        $app.add($below);
        
        var $mid = Easycanvas.class.fade({
            name: 'bgbelow',
            content: {
                img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            },
            style: {
                locate: 'lt',
                zIndex: 2,
                width: document.body.clientWidth,
                height: document.body.clientHeight
            },
        });

        $app.add($mid);
        
        var $above = Easycanvas.class.fade({
            name: 'bgabove',
            content: {
                img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            },
            style: {
                locate: 'lt',
                zIndex: 3,
                width: document.body.clientWidth,
                height: document.body.clientHeight
            },
            // children: [{
            //     content: {
            //         img: 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
            //     },
            //     style: {
            //         locate: 'lt',
            //         zIndex: 1,
            //         width: 200,
            //         height: 200,
            //     },
            // }]
        });

        $app.add($above);

        setTimeout(() => {
            $above
                .fade({
                    type: 'flow',
                    ticks: 90,
                })
                .then(() => {
                    console.log('1 done.');
                    $mid
                        .fade({
                            type: 'drip',
                            ticks: 30,
                        })
                        .then(() => {
                            console.log('2 done.');
                        });
                });
        }, 500);
    </script>
</body>

